<template>
  <div class="app-container">
    <div class="customContainer towSearchHeader">
      <!-- 搜索头 -->
      <el-form :inline="true" :model="formInline" class="demo-form-inline" size="small">
        <el-form-item>
          <el-date-picker style="width:300px" :editable="false" :clearable="false" v-model="pickerDate" value-format="yyyy-MM-dd" type="daterange" align="right"
            unlink-panels range-separator="-" start-placeholder="开始日期" end-placeholder="结束日期" :picker-options="pickerOptions"></el-date-picker>
        </el-form-item>
        <el-form-item>
          <span style="color: #888;">对接人：</span>
          <el-select v-model="formInline.emp_id" placeholder="请选择对接人" style="width:130px" clearable>
            <el-option v-for="item in docking_list" :key="item.id" :label="item.nick" :value="item.id"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-select v-model="supplier_type" style="width:130px" @change="searchChange">
            <el-option v-for="item in search_list" :key="item.id" :label="item.name" :value="item.id"></el-option>
          </el-select>
          <el-autocomplete clearable v-model="formInline.supplier" style="width:200px" :fetch-suggestions="querySearch" :placeholder="searchPld"
            :trigger-on-focus="false" valueKey="name" size="small" @keyup.enter.native="searchClick"></el-autocomplete>
        </el-form-item>
        <el-form-item>
          <dj-button size="small" @search="searchClick" />
        </el-form-item>
      </el-form>
      <!-- 表格 -->
      <el-table highlight-current-row :data="list" v-loading.body="listLoading" border size="small">
        <el-table-column align="center" label="序号" width="50">
          <template slot-scope="scope">
            <span class="indexColor">{{scope.$index+1+(currentPage-1)*20}}</span>
          </template>
        </el-table-column>
        <el-table-column align="center" label="供应商编号" prop="serial_number" width="90"></el-table-column>
        <el-table-column align="center" label="供应商名称" prop="name"></el-table-column>
        <el-table-column align="center" label="总部对接人" prop="butt_man" width="90"></el-table-column>
        <el-table-column align="center" label="用款单号" prop="order_id"></el-table-column>
        <el-table-column align="center" label="申请时间" prop="create_time" width="140"></el-table-column>
        <el-table-column align="center" label="订单金额" prop="all_money" width="95"></el-table-column>
        <el-table-column align="center" label="调整金额" prop="adjust_money" width="95"></el-table-column>
        <el-table-column align="center" label="用款金额" prop="use_money" width="95"></el-table-column>
        <el-table-column align="center" label="已打款金额" prop="amount_paid_money" width="95"></el-table-column>
        <el-table-column align="center" label="抵用款" prop="kite_money" width="95"></el-table-column>
        <el-table-column align="center" label="让利" prop="surrender_money" width="95"></el-table-column>
        <el-table-column align="center" label="未付款金额" prop="notpay_money" width="95"></el-table-column>
        <el-table-column align="center" label="到货金额" prop="arrive_money" width="95"></el-table-column>
        <el-table-column align="center" label="欠货金额" prop="owe_money" width="95"></el-table-column>
      </el-table>
      <el-table style="margin-top:5px" highlight-current-row :data="totalList" :show-header="false" border size="small">
        <el-table-column align="center" prop="name"></el-table-column>
        <el-table-column align="center" label="订单金额" prop="all_money" width="95"></el-table-column>
        <el-table-column align="center" label="调整金额" prop="adjust_money" width="95"></el-table-column>
        <el-table-column align="center" label="用款金额" prop="use_money" width="95"></el-table-column>
        <el-table-column align="center" label="已打款金额" prop="amount_paid_money" width="95"></el-table-column>
        <el-table-column align="center" label="抵用款" prop="kite_money" width="95"></el-table-column>
        <el-table-column align="center" label="让利" prop="surrender_money" width="95"></el-table-column>
        <el-table-column align="center" label="未付款金额" prop="notpay_money" width="95"></el-table-column>
        <el-table-column align="center" label="到货金额" prop="arrive_money" width="95"></el-table-column>
        <el-table-column align="center" label="欠货金额" prop="owe_money" width="95"></el-table-column>
      </el-table>
    </div>
    <!-- 自定义底部 -->
    <div class="bottom_box">
      <el-pagination class="pull-left" background @current-change="handleCurrentChange" :current-page.sync="currentPage" :page-size="20"
        layout="prev, pager, next, jumper" :total="totalDataNumber"></el-pagination>
    </div>
  </div>
</template>
<script>
import { getPage, getList } from '@/api/report/supMoneyForm';
import { getDocking, getSup } from '@/api/common/commonApi';
import { pickerOptionsF, pickerDateF, optionMaxTime } from '@/utils';
export default {
  data() {
    return {
      list: null,
      totalList: [
        {
          name: '合计',
          all_money: '',
          adjust_money: '',
          use_money: '',
          amount_paid_money: '',
          kite_money: '',
          notpay_money: '',
          arrive_money: '',
          owe_money: '',
          surrender_money: ''
        }
      ],
      listLoading: false,
      search_list: [
        { id: '1', name: '按供应商名称' },
        { id: '2', name: '按供应商编号' }
      ],
      docking_list: [],
      supplier_list: [], //供应商名称列表
      searchPld: '请输入供应商名称',
      supplier_type: '1',
      formInline: {
        start_time: '',
        end_time: '',
        emp_id: '',
        supplier_type: '',
        supplier: ''
      },
      totalDataNumber: 1,
      currentPage: 1,
      pickerOptions: pickerOptionsF(),
      pickerDate: []
    };
  },
  beforeRouteEnter(to, from, next) {
    next(vm => {
      if (!vm.list) {
        vm.getUserList();
      }
    });
  },
  methods: {
    searchChange(val) {
      this.formInline.supplier = '';
      this.searchPld = val == 1 ? '请输入供应商名称' : '请输入供应商编号';
    },
    getUserList() {
      // this.listLoading = true;
      getDocking({}).then(res => {
        this.docking_list = res;
        this.searchClick();
        this.getSupName();
      });
    },
    //获取供应商名称数组
    getSupName() {
      getSup({}).then(res => {
        this.supplier_list = res;
      });
    },
    querySearch(queryString, cb) {
      var supplier_list = this.supplier_list;
      var results = queryString ? supplier_list.filter(this.createFilter(queryString)) : supplier_list;
      // 调用 callback 返回建议列表的数据
      cb(results);
    },
    createFilter(queryString) {
      return restaurant => {
        if (this.supplier_type == 1) {
          return restaurant.name.indexOf(queryString) >= 0;
        } else {
          return false;
        }
      };
    },
    // 搜索
    searchClick() {
      this.formInline.start_time = this.pickerDate ? this.pickerDate[0] : '';
      this.formInline.end_time = this.pickerDate ? this.pickerDate[1] : '';
      this.formInline.supplier_type = this.formInline.supplier ? this.supplier_type : '';
      this.fetchData();
      // optionMaxTime(this.pickerDate).then(() => {//最大可选择时间区间
      // });
    },
    getData(data) {
      data.forEach(val => {
        val.all_money = (val.all_money / 100).toFixed(2);
        val.surrender_money = (val.surrender_money / 100).toFixed(2);
        val.adjust_money = (val.adjust_money / 100).toFixed(2);
        val.amount_paid_money = (val.amount_paid_money / 100).toFixed(2);
        val.kite_money = (val.kite_money / 100).toFixed(2);
        val.arrive_money = (val.arrive_money / 100).toFixed(2);
        val.use_money = (val.all_money / 1 + val.adjust_money / 1).toFixed(2);
        val.notpay_money = (val.use_money - val.amount_paid_money - val.kite_money - val.surrender_money).toFixed(2);
        val.owe_money = (val.all_money - val.arrive_money).toFixed(2);
      });
      this.list = data;
      this.listLoading = false;
    },
    // 列表获取
    fetchData() {
      this.listLoading = true;
      this.currentPage = 1;
      this.list = [];
      getPage(this.formInline)
        .then(response => {
          if (response.code == 1) {
            let total_data = response.data;
            this.totalList[0].surrender_money = (total_data.surrender_money / 100).toFixed(2);
            this.totalList[0].all_money = (total_data.all_money / 100).toFixed(2);
            this.totalList[0].adjust_money = (total_data.adjust_money / 100).toFixed(2);
            this.totalList[0].amount_paid_money = (total_data.amount_paid_money / 100).toFixed(2);
            this.totalList[0].kite_money = (total_data.kite_money / 100).toFixed(2);
            this.totalList[0].arrive_money = (total_data.arrive_money / 100).toFixed(2);
            this.totalList[0].use_money = (this.totalList[0].all_money / 1 + this.totalList[0].adjust_money / 1).toFixed(2);
            this.totalList[0].notpay_money = (
              this.totalList[0].use_money -
              this.totalList[0].amount_paid_money -
              this.totalList[0].kite_money -
              this.totalList[0].surrender_money
            ).toFixed(2);
            this.totalList[0].owe_money = (this.totalList[0].all_money - this.totalList[0].arrive_money).toFixed(2);
            this.totalDataNumber = total_data.page * 20;
            if (this.totalDataNumber <= 0) {
              this.listLoading = false;
              return;
            }
            getList(this.formInline).then(res => {
              if (res.code == 1) {
                this.getData(res.data);
              }
            });
          }
        })
        .catch(res => {
          this.listLoading = false;
        });
    },
    handleCurrentChange(val) {
      this.listLoading = true;
      this.list = [];
      getList(this.formInline, val).then(res => {
        this.getData(res.data);
      });
    }
  }
};
</script>